/*
 * @Descripttion: GGB
 * @version: 1.0
 * @Author: GGB
 * @Date: 2021-08-19 09:39:05
 * @LastEditors: GGB
 * @LastEditTime: 2021-08-19 22:26:57
 */
import 'package:flutter/material.dart';
import 'package:flutter_data_center/model/common/menu_model.dart';

class RowMenu extends StatelessWidget {
  const RowMenu({
    Key key,
    this.currentIndex,
    this.onChange,
    this.menus,
    this.showRight = false,
    this.height = 50,
    this.inactiveStyle = const TextStyle(
      fontSize: 13,
      fontWeight: FontWeight.w500,
    ),
    this.activeStyle = const TextStyle(
      fontSize: 18,
      fontWeight: FontWeight.w700,
    ),
    this.dotHeight = 4,
    this.dotWidth = 24,
    this.dotRadius = 20,
    this.dotBg = Colors.black,
    this.slot,
    this.showDot = true,
  }) : super(key: key);
  final int currentIndex;
  final ValueChanged<int> onChange;
  final List<MenuModel> menus;
  final bool showRight;
  final Widget slot;
  final double height;
  final TextStyle inactiveStyle;
  final TextStyle activeStyle;
  final double dotHeight;
  final double dotWidth;
  final double dotRadius;
  final Color dotBg;
  final bool showDot;

  @override
  Widget build(BuildContext context) => Row(
        children: [
          Container(
            height: height,
            width: showRight
                ? MediaQuery.of(context).size.width * 0.6
                : double.infinity,
            child: ListView.builder(
              scrollDirection: Axis.horizontal,
              itemCount: menus.length,
              itemBuilder: (context, index) => GestureDetector(
                onTap: () => onChange(index),
                child: Padding(
                  padding: const EdgeInsets.symmetric(
                    horizontal: 10,
                  ),
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.center,
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: [
                      Text(
                        "${menus[index].value}",
                        style:
                            currentIndex == index ? activeStyle : inactiveStyle,
                      ),
                      if (showDot)
                        currentIndex == index
                            ? Container(
                                width: dotWidth,
                                height: dotHeight,
                                decoration: BoxDecoration(
                                  borderRadius:
                                      BorderRadius.circular(dotRadius),
                                  color: Colors.black,
                                ),
                              )
                            : SizedBox(
                                height: dotHeight,
                              ),
                    ],
                  ),
                ),
              ),
            ),
          ),
          if (showRight) Spacer(),
          if (showRight) slot,
        ],
      );
}
